<template>
  <div>
    <div class="container">
      <DataTable rowKey="id" :tableData="Data" :btns="btns" :tableColumn="tableColumn" :showConfig = "false" :pageConfig="pageConfig"></DataTable>
    </div>
    <CommonDialog
      :rows="rows"
      :form="form"
      title="添加项目"
      :visible="formVisible"
      @hideDialog="hideFormVisible"
      @confirm="confirmHandle()"
    />
  </div>
</template>
<script lang='ts'>
import { Component, Watch, Vue } from 'vue-property-decorator'

@Component
export default class acceptanceConfig extends Vue {
  formVisible: boolean = false;
  memberList:any = [];
  projectList:any = [];
  keyWork:any = []
  page:any = 1
  form: any = {
    projectId: undefined,
    assetFalg: 'Y'
  };
  btns: any[] = [
    {
      label: '添加项目',
      icon: 'add',
      callback: this.showEditDialog
    }
  ];
  get rows () {
    return {
      projectId: {
        label: '选择项目',
        el: 'select',
        placeholder: '请选择选择项目',
        options: this.projectList,
        showSearch: true,
        search: this.handleSearch,
        popupScroll: this.popupScroll,
        rules: [{ required: true, message: '请选择选择项目', trigger: 'blur' }]
      }
    }
  }
    pageConfig: any = {
        current: 1,
        total: 10,
        pageSize: 10,
        onChange: this.changePage
    };
  Data: any[] = []
  tableColumn: any = {
    ind: {
      label: '序号',
      width: 120
    },
    code: {
      label: '项目编码',
      width: 120
    },
    ncProjectName: {
      label: '项目名称',
      width: 100
    },
    assetFlag: {
      label: '是否统计数据',
      width: 100,
      type: 'switch',
      callback: this.handleSwitch
    },
    action: {
          label: '操作',
          width: 120,
          template: [
          {
            tag: 'a',
            text: '删除',
            callback: this.delImte
          }
        ]
      }
  }
  hideFormVisible () {
    this.formVisible = false;
    this.form.memberId = undefined;
  }
  showEditDialog (val:any) {
    // this.form.memberId = val.id;
    this.formVisible = true;
  }
  // 获取列表数据
  getList () {
      let data = {
          page: this.pageConfig.current,
          size: this.pageConfig.pageSize
      }
      this.$api.assetSettingSettingProjectListFetch(data).then((res:any) => {
          if (res.code == 0) {
              res.data.records.map((item:any, index:any) => {
                  item.ind = this.pageConfig.pageSize * (this.pageConfig.current - 1) + index
                  if (item.assetFlag == 'Y') {
                      item.assetFlag = true
                  } else {
                      item.assetFlag = false
                  }
              })
              this.Data = res.data.records
              this.pageConfig.total = res.data.total
          }
      }).catch()
  }
  // 删除配置
  delImte (val:any) {
      let that = this
      this.$confirm({
        content: '是否确定要删除',
        onOk () {
            that.$api.assetSettingSettingProjectDeleteFetch({projectId: val.ncProjectId}).then(res => {
                if (res.code == 0) {
                    that.$message.success('操作成功');
                    that.getList()
                }
            }).catch()
        },
        onCancel () {
        }
      })
    //
  }
  // 修改状态
  handleSwitch (val:any) {
      let obj = Object.assign({}, val)
        if (obj.assetFlag) {
            obj.assetFlag = 'Y'
        } else {
            obj.assetFlag = 'N'
        }
      let data = {
          projectId: obj.ncProjectId,
          assetFalg: obj.assetFlag
      }
      this.$api.assetSettingSettingProjectAddFetch(data).then(res => {
          if (res.code == 0) {
              this.$message.success('操作成功');
          }
      }).catch()
  }
  // 添加项目
  confirmHandle () {
      this.$api.assetSettingSettingProjectAddFetch(this.form).then(res => {
          if (res.code == 0) {
            this.$message.success('操作成功');
            this.formVisible = false
            this.form.projectId = undefined
            this.getList()
          }
      }).catch()
  }
  // 搜索
  handleSearch (val:any) {
    this.keyWork = val
    this.page = 1
    this.projectList = []
    this.getProjectList()
  }
  // 获取项目列表
  getProjectList () {
      let listArr:any = []
    this.$api.projectRoleProjectListFetch({size: 100, page: this.page, searchValue: this.keyWork}).then((res:any) => {
        if (res.data.records.length > 0) {
            listArr = res.data.records.map((item:any) => ({
                label: item.ncProjectName,
                value: item.ncProjectId
            }))
        }

      this.projectList = this.projectList.concat(listArr)
    }).catch()
  }
  // 滚动选择框时执行
  popupScroll (e:any) {
    const { scrollHeight, scrollTop, clientHeight } = e.target

      if (scrollHeight - scrollTop === clientHeight) {
          console.log(11)
        this.page++
        this.getProjectList()
      }
  }
  init () {
      this.getList()
      this.getProjectList()
  }
}
</script>
<style lang='scss' scoped>
.red {
  color: red
}
</style>
